import { Ellipsis, Image } from '@nutui/nutui-react-taro';
import { CSSProperties, ReactNode } from 'react';
import Tag, { Props as TagProps } from '../Tag';
import { View, Text } from '@tarojs/components';
import styles from './style.scss';
import Taro from '@tarojs/taro';
import Card from '../Card';

type Props = {
  children?: ReactNode;
  title?: ReactNode;
  className?: string;
  size?: 'large' | 'small';
  showTitleBlock?: boolean;
  tag?: {
    type?: TagProps['type'];
    text: string;
    dot?: boolean;
  };
  contract?: boolean;
};
export const Descriptions = (props: Props) => {
  const {
    children,
    title,
    className,
    size,
    showTitleBlock = true,
    tag,
    contract = true,
  } = props;
  return (
    <Card
      contract={contract}
      title={
        <View className={styles.topWrap}>
          <View className={styles.nameWrap}>{title}</View>
          {tag && (
            <Tag className={styles.tag} type={tag.type} dot={tag.dot}>
              {tag.text}
            </Tag>
          )}
        </View>
      }
      className={`${styles.card} descriptions_${size} ${className || ''}`}
      showTitleBlock={showTitleBlock}
    >
      {children}
    </Card>
  );
};

export const Item = ({
  label,
  content,
  image,
  contentStyle,
  sign,
  align,
  block,
}: {
  label?: ReactNode;
  content?: ReactNode;
  image?: string | API.Files[];
  contentStyle?: CSSProperties;
  sign?: boolean;
  align?: CSSProperties['textAlign'];
  list?: any[];
  block?: boolean;
}) => {
  return (
    <View className="cell">
      {label && <View className="cell_label">{label}</View>}
      <View
        className={`cell_text ${block ? styles.block : ''}`}
        style={{ textAlign: align, ...contentStyle }}
      >
        {image?.length ? (
          <View
            className="cell_image"
            onClick={() => {
              Taro.previewImage({
                current: '',
                urls: Array.isArray(image)
                  ? image.map((item) => item.fileUrl)
                  : [image],
              });
            }}
          >
            <Image src={Array.isArray(image) ? image[0]?.fileUrl : image} />
            {Array.isArray(image) && image.length > 1 && (
              <Text className="count">1/{image.length}</Text>
            )}
          </View>
        ) : content instanceof String ? (
          <Ellipsis
            content={(content as any) || '-'}
            direction="end"
            rows={3}
            expandText="展开"
            collapseText="收起"
            style={{ color: sign ? '#FF3141' : undefined }}
          />
        ) : (
          content || '-'
        )}
      </View>
    </View>
  );
};
